<template>
	<view class="page">
		<!-- 顶部背景与导航 -->
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill" />
		<u-navbar title="不合格信息上报" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
			:titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder />
		<view style="height: 60rpx;"></view>

		<view class="content">
			<view class="form-card">
				<view class="form-item">
					<text class="label">标题</text>
					<view class="ctrl full">
						<uni-easyinput v-model="form.title" placeholder="请输入" :inputBorder="false" />
					</view>
				</view>

				<view class="form-item">
					<text class="label">上传人</text>
					<view class="ctrl full">
						<uni-easyinput v-model="form.uploader" placeholder="请输入" :inputBorder="false" />
					</view>
				</view>

				<view class="form-item">
					<text class="label">上传时间</text>
					<view class="ctrl full">
						<picker mode="date" :value="form.date" @change="onDateChange">
							<view class="picker-input">
								<text class="date-text">{{ form.date || '请选择日期' }}</text>
								<u-icon name="calendar" color="#29a74d" size="18" />
							</view>
						</picker>
					</view>
				</view>

				<view class="form-item top">
					<text class="label">简介</text>
					<view class="ctrl full">
						<uni-easyinput type="textarea" v-model="form.desc" placeholder="请输入" :inputBorder="false"
							:autoHeight="true" />
					</view>
				</view>

				<view class="attach-block">
					<view class="row">
						<text class="label">附件</text>
						<view class="attach-ops">
							<uni-file-picker ref="picker" v-model="files" :limit="9" :auto-upload="false"
								file-mediatype="all" :disable-preview="false" mode="list" @select="onFileSelect"
								@delete="onFileDelete">
								<view class="mini btn-ghost">选择文件</view>
							</uni-file-picker>
							<text class="hint">支持多文件，最大10MB/个</text>
						</view>
					</view>
					<!-- <view class="row">
						<text class="label"> </text>
						<button class="mini btn-gray" :disabled="!files.length" @click="onDownload">下载文件</button>
					</view> -->
				</view>
			</view>

			<view class="actions">
				<button class="btn primary" @click="onSubmit">确认</button>
				<button class="btn ghost" @click="onDraft">存草稿</button>
				<button class="btn gray" @click="onCancel">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
import navbarMixin from '@/common/navbarMixin'
export default {
	mixins: [navbarMixin],
	data() {
		return {
			form: {
				title: '',
				uploader: '',
				date: '',
				desc: ''
			},
			files: []
		}
	},
	methods: {
		onDateChange(e) {
			this.form.date = e?.detail?.value || ''
		},
		onFileSelect(e) {
			// 10MB 限制（单文件）
			const MAX = 10 * 1024 * 1024
			const over = (e?.tempFiles || []).filter(f => (f?.size || 0) > MAX)
			if (over.length) {
				uni.showToast({ title: '有文件超过10MB已忽略', icon: 'none' })
				// 过滤掉超限的
				const keep = (e.tempFiles || []).filter(f => (f?.size || 0) <= MAX)
				this.files = [...this.files, ...keep]
			}
		},
		onFileDelete(e) {
			// uni-file-picker 会同步 v-model，这里可选保底处理
			this.files = e?.tempFilePaths || this.files
		},
		async onDownload() {
			if (!this.files || !this.files.length) {
				uni.showToast({ title: '暂无可下载文件', icon: 'none' })
				return
			}
			try {
				const first = this.files[0]
				const url = first.url || first.path || first.tempFilePath
				if (!url) throw new Error('no url')
				const res = await new Promise((resolve) => {
					uni.downloadFile({ url, success: resolve, fail: resolve })
				})
				const filePath = res?.tempFilePath
				if (filePath) {
					uni.openDocument({ filePath })
				} else {
					uni.showToast({ title: '下载失败', icon: 'none' })
				}
			} catch (_) {
				uni.showToast({ title: '下载失败', icon: 'none' })
			}
		},
		onSubmit() {
			// TODO: 对接提交接口，附带 this.form 与 this.files
			uni.showToast({ title: '已提交', icon: 'success' })
		},
		onDraft() {
			// TODO: 对接草稿保存接口
			uni.showToast({ title: '草稿已保存', icon: 'success' })
		},
		onCancel() {
			uni.navigateBack({ delta: 1 })
		},
		// 兜底：需要时可手动触发选择
		openPicker() {
			try { this.$refs.picker && this.$refs.picker.choose && this.$refs.picker.choose() } catch (e) { }
		}
	}
}
</script>

<style lang="scss">
/* 绿色主题变量 */
$brand: #29a74d;
$brand-weak: #e9f7ee;
$brand-border: #cfe9db;
$brand-strong: #239243;

.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
}

.page {
	background: #f6f7fb;
	min-height: 100vh;
}

.content {
	padding: 24rpx;
}

.form-card {
	background: #fff;
	border: 1rpx solid #eef2f7;
	border-radius: 22rpx;
	padding: 12rpx 18rpx;
	box-shadow: 0 10rpx 24rpx rgba(12, 18, 28, .06);
}

.form-item {
	display: flex;
	align-items: center;
	padding: 18rpx 8rpx;
}

.form-item+.form-item {
	border-top: 1rpx dashed #eef2f7;
}

.form-item.top {
	align-items: flex-start;
}

.label {
	width: 200rpx;
	color: #374151;
	font-size: 28rpx;
	line-height: 72rpx;
}

.ctrl {
	flex: 1;
	display: flex;
	align-items: center;
}

.ctrl.full {
	width: 100%;
}

/* 输入弱底样式 */
::v-deep .uni-easyinput__content {
	background: $brand-weak;
	border-radius: 14rpx !important;
	min-height: 72rpx;
}

::v-deep .uni-easyinput__content-textarea {
	background: $brand-weak;
	border-radius: 14rpx;
	min-height: 72rpx;
	padding: 16rpx 20rpx;
	border: 1rpx solid $brand-border;
}

::v-deep .uni-easyinput__placeholder-class {
	color: #9ca3af;
}

.picker-input {
	height: 72rpx;
	border: 1rpx solid $brand-border;
	border-radius: 14rpx;
	padding: 0 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: $brand-weak;
	color: #111827;
}

.date-text {
	color: #111827;
}

.attach-block {
	padding: 12rpx 8rpx 4rpx;
}

.attach-block .row {
	display: flex;
	align-items: center;
	padding: 12rpx 0;
}

.attach-ops {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.hint {
	color: #6b7280;
	font-size: 24rpx;
}

/* 覆盖 file-picker 内部按钮 */
.mini {
	height: 56rpx;
	line-height: 56rpx;
	border-radius: 12rpx;
	padding: 0 24rpx;
	font-size: 26rpx;
}

.btn-ghost {
	background: #fff;
	color: $brand-strong;
	box-shadow: inset 0 0 0 1rpx $brand-border;
}

.btn-gray {
	background: #e5e7eb;
	color: #374151;
	border: none;
}

.actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18rpx;
	padding: 26rpx 12rpx;
}

.btn {
	height: 72rpx;
	line-height: 72rpx;
	border-radius: 14rpx;
	font-size: 28rpx;
	border: none;
}

.btn.primary {
	background: linear-gradient(90deg, lighten($brand, 2%), $brand-strong);
	color: #fff;
	box-shadow: 0 6rpx 14rpx rgba(37, 154, 68, .22);
}

.btn.ghost {
	background: #fff;
	color: $brand-strong;
	box-shadow: inset 0 0 0 1rpx $brand-border;
}

.btn.gray {
	background: #e5e7eb;
	color: #374151;
}
</style>
